﻿<MContainer>
    <MRow Justify=JustifyTypes.SpaceAround>
        <MCard Width="400">

            <MImage Height="200" Src="https://cdn.pixabay.com/photo/2020/07/12/07/47/bee-5396362_1280.jpg">

                <MAppBar Flat Color="rgba(0, 0, 0, 0)">
                    <MAppBarNavIcon Color="white"></MAppBarNavIcon>
                    <MToolbarTitle Class="text-h6 white--text pl-0"> Messages</MToolbarTitle>
                    <MSpacer></MSpacer>
                    <MButton Color="white" Icon>
                        <MIcon>mdi-dots-vertical</MIcon>
                    </MButton>
                </MAppBar>

                <MCardTitle Class="white--text mt-8">
                    <MAvatar Size=56>
                        <MImage Src="https://cdn.pixabay.com/photo/2020/06/24/19/12/cabbage-5337431_1280.jpg"></MImage>
                    </MAvatar>
                    <p class="ml-3">
                        John Doe
                    </p>
                </MCardTitle>

            </MImage>

            <MCardText>
                <div class="font-weight-bold ml-8 mb-2">
                    Today
                </div>
                <MTimeline AlignTop Dense>
                    @foreach (var message in _messages)
                    {
                        <MTimelineItem key="@message.Time" Color="@message.Color" Small>
                            <div>
                                <div class="font-weight-normal">
                                    <strong>@message.From</strong>@message.Time
                                </div>
                                <div>@message.Message</div>
                            </div>
                        </MTimelineItem>
                    }
                </MTimeline>
            </MCardText>

        </MCard>
    </MRow>
</MContainer>

@code {
    MessageDto[] _messages = new[]
    {
        new MessageDto
        {
            From="You",
            Message="Sure, I'll see you later.",
            Time="10:42am",
            Color="deep-purple lighten-1"
        },
        new MessageDto
        {
            From="John Doe",
            Message="Yeah, sure. Does 1:00pm work?",
            Time="10:37am",
            Color="green"
        },
        new MessageDto
        {
            From="You",
            Message="Did you still want to grab lunch today?",
            Time="9:47am",
            Color="deep-purple lighten-1"
        }
    };

    class MessageDto
    {
        public string From { get; set; }
        public string Message { get; set; }
        public string Time { get; set; }
        public string Color { get; set; }
    }
}